<template>
  <view class="pt-20 plr-30 bg  min100">
    <u-tabs
      active-color="#44ACFF"
      inactive-color="#999"
      bg-color="transparent"
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
    ></u-tabs>
    <view class="" v-if="current == 0">
      <u-field v-model="name" label="微信账号" label-width="180" placeholder="请输入微信账号"> </u-field>
      <view class="mtb-20 ml-30"> 请上传微信收款码 </view>
      <image v-if="image" :src="image" mode="" class="upImg" @click="chooseImg"></image>
      <image src="../../static/upImg.png" mode="" v-else class="upImg" @click="chooseImg"></image>
      <u-field v-model="account" @input="changeReal" label="提现金额" label-width="180" placeholder="请输入提现金额" />
      <view class="tips mt-20 size-20 ml-30 flex">
        <view>可用余额:{{ walletAccount }}</view>
        <view>手续费:{{ withdrawConfig.rate }}%</view>
      </view>
      <view class="flex flex-between mt-40 ml-30">
        <view class=""> 实际到账 </view>
        <view class="bold">
          {{ realtyMoney }}
        </view>
      </view>
    </view>
    <view class="" v-if="current == 1">
      <u-field v-model="name" label="支付宝账号" label-width="180" placeholder="请输入支付宝账号"> </u-field>
      <view class="mtb-20 ml-30"> 请上传支付宝收款码 </view>
      <image v-if="image" :src="image" mode="" class="upImg" @click="chooseImg"></image>
      <image src="../../static/upImg.png" v-else mode="" class="upImg" @click="chooseImg"></image>
      <u-field v-model="account" @input="changeReal" label="提现金额" label-width="180" placeholder="请输入提现金额" />
      <view class="tips mt-20 size-20 ml-30 flex">
        <view>可用余额:{{ walletAccount }}</view>
        <view>手续费:{{ withdrawConfig.rate }}%</view>
      </view>
      <view class="flex flex-between mt-40 ml-30">
        <view class=""> 实际到账 </view>
        <view class="bold">
          {{ realtyMoney }}
        </view>
      </view>
    </view>
    <view class="" v-if="current == 2">
      <u-field v-model="bank_name" label="银行名称" label-width="180" placeholder="请输入银行名称"> </u-field>
      <u-field v-model="bank_number" label="银行卡号" label-width="180" placeholder="请输入银行卡号"> </u-field>
      <u-field v-model="bank_owner" label="开户人" label-width="180" placeholder="请输入开户人姓名"> </u-field>
      <u-field v-model="account" @input="changeReal" label="提现金额" label-width="180" placeholder="请输入提现金额" />
      <view class="tips mt-20 size-20 ml-30 flex">
        <view>可用余额:{{ walletAccount }}</view>
        <view>手续费:{{ withdrawConfig.rate }}%</view>
      </view>
      <view class="flex flex-between mt-40 ml-30">
        <view class=""> 实际到账 </view>
        <view class="bold">
          {{ realtyMoney }}
        </view>
      </view>
    </view>
    <view class="mt-20 size-20 ml-30 gray-2">
      <view class="mb-20">提现最小值:{{ withdrawConfig.min }}</view>
      <view class="mb-20">提现最大值:{{ withdrawConfig.max }}</view>
      <view v-html="withdrawConfig.content" class="mb-20"></view>
    </view>
    <u-button type="primary" class="mt-100 drawBtn" @click="submitWithdraw" hover-class="none">确认提现</u-button>
  </view>
</template>

<script>
import tab from '../../components/tab.vue';
import { upload } from '../../common/common.js';
export default {
  components: {
    tab
  },
  data() {
    return {
      bank_name: '',
      bank_number: '',
      bank_owner: '',
      realtyMoney: 0, //实际
      account: '',
      name: '',
      image: '',
      list: [
        // {
        //   name: '微信'
        // },
        // {
        //   name: '支付宝'
        // },
        {
          name: '银行卡'
        }
      ],
      current: 2,
      walletAccount: 0,
      withdrawConfig: {} //配置
    };
  },
  onLoad() {
    // 余额
    this.$http('api/account/account').then(res => {
      this.walletAccount = res.account;
    });
    // // 配置
    this.$http('api/draw/configDraw').then(res => {
      this.withdrawConfig = res;
    });
  },
  methods: {
    reset() {
      this.bank_name = '';
      this.bank_number = '';
      this.bank_owner = '';
      this.realtyMoney = 0; //实际
      this.account = '';
      this.name = '';
      this.image = '';
    },
    // 头部按钮
    onNavigationBarButtonTap() {
      uni.navigateTo({
        url: './withdrawRecord'
      });
    },
    // 展示实际到账
    changeReal(e) {
      let account = e;
      this.realtyMoney = (e * (1 - this.withdrawConfig.rate / 100)).toFixed(2);
    },
    change(e) {
      this.current = e;
      this.reset();
    },
    submitWithdraw() {
      if (this.current == 0) {
        if (this.name == '') {
          uni.showToast({
            title: '请输入微信账号!',
            icon: 'none'
          });
          return;
        }
        if (this.image == '') {
          uni.showToast({
            title: '请上传微信收款码!',
            icon: 'none'
          });
          return;
        }
      } else if (this.current == 1) {
        if (this.name == '') {
          uni.showToast({
            title: '请输入支付宝账号!',
            icon: 'none'
          });
          return;
        }
        if (this.image == '') {
          uni.showToast({
            title: '请上传支付宝收款码!',
            icon: 'none'
          });
          return;
        }
      } else if (this.current == 2) {
        if (this.bank_name == '') {
          uni.showToast({
            title: '请输入银行名称!',
            icon: 'none'
          });
          return;
        }
        if (this.bank_number == '') {
          uni.showToast({
            title: '请输入银行卡号!',
            icon: 'none'
          });
          return;
        }
        if (this.bank_owner == '') {
          uni.showToast({
            title: '请输入开户人姓名!',
            icon: 'none'
          });
          return;
        }
      }
      if (this.account == '') {
        uni.showToast({
          title: '请输入提现金额!',
          icon: 'none'
        });
        return;
      }
      let type = Number(this.current) + 1;
      this.$http(
        'api/draw/draw',
        {
          type: type,
          account: this.account,
          name: this.name,
          image: this.image,
          bank_name: this.bank_name,
          bank_number: this.bank_number,
          bank_owner: this.bank_owner
        },
        'POST'
      ).then(res => {
        this.reset();
        uni.showToast({
          title: '提交成功，请等待审核!'
        });
        setTimeout(() => {
          uni.navigateTo({
            url: './withdrawRecord'
          });
        }, 500);
      });
    },
    chooseImg() {
      upload().then(data => {
        this.image = data.path;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.upImg {
  width: 120rpx;
  height: 120rpx;
  margin-left: 30rpx;
}
.u-label-text{
	color: red;
}
.tips {
  color: #44acff;
}

.drawBtn {
  position: absolute;
  z-index: 10;
  bottom: 200rpx;
  left: 50%;
  transform: translateX(-50%);
  color: #fff !important;
}
::v-deep  .u-field {
  color: #fff !important;
  font-size: 26rpx;
}
</style>
